{extend name="main"}

{block name="button"}
{/block}

{block name="content"}

<div class="think-box-shadow margin-top-15">
    <div class="padding-top-20" style="max-width:850px">
        <div class="layui-anim layui-anim-fadein">
            <form action="{:request()->url()}" method="post" data-auto="true" class="layui-form layui-card shadow-none">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><b>佣金百分比</b><br></label>
                        <div class="layui-input-block">
                            <input required name="transport_commission"  placeholder="请输入佣金百分比" type="number" value="{:sysconf('transport_commission')}" class="layui-input"/>
                            <p class="help-block">填写百分比数值，范围 0-100</p>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><b>货运场景</b><br></label>
                        <div class="layui-input-block">
                            <table class="layui-table" id="transportTypeTable">
                                <thead>
                                <tr>
                                    <th>排序</th>
                                    <th>名称</th>
                                    <th>图标</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="tableBody">
                                <!-- 动态行插入到这里 -->
                                {volist name="transport_scene_list_arr" id="vo"}
                                <tr class="data-row">
                                    <td><input name="transport_scene_list_arr[{$key}][sort]" type="number" value="{$vo.sort|default='0'}" placeholder="请输入排序" class="layui-input " ></td>
                                    <td><input name="transport_scene_list_arr[{$key}][name]" type="text"  value="{$vo.name|default=''}" placeholder="请输入名称" class="layui-input " ></td>
                                    <td><input name="transport_scene_list_arr[{$key}][img]" type="hidden" value="{$vo.img|default=''}" data-max-width="500" data-max-height="500"  value=""> </td>
                                    <td>
                                        <button class="layui-btn layui-btn-danger layui-btn-sm del-btn">删除</button>
                                    </td>
                                    <script>$('[name="transport_scene_list_arr[{$key}][img]"]').uploadOneImage();</script>
                                </tr>
                                {/volist}
                                <tr class="addRowBtnTr">
                                    <td colspan="4" style="text-align:center;">
                                        <div class="addRowBtn color-blue pointer" >添加一行</div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><b>货物类型</b><br></label>
                        <div class="layui-input-block">
                            <textarea required name="transport_type_list"  placeholder="请输入货物类型选项" class="layui-textarea">{:sysconf('transport_type_list')}</textarea>
                            <p class="help-block">用中文“；”分开多个选项</p>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><b>运输距离</b><br></label>
                        <div class="layui-input-block">
                            <table class="layui-table" id="transportDistanceTable">
                                <thead>
                                <tr>
                                    <th>排序</th>
                                    <th>名称</th>
                                    <th>距离</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="tableBody">
                                <!-- 动态行插入到这里 -->
                                {volist name="transport_distance_list_arr" id="vo"}
                                <tr class="data-row">
                                    <td><input name="transport_distance_list_arr[{$key}][sort]" type="number" value="{$vo.sort|default='0'}" placeholder="请输入排序" class="layui-input " ></td>
                                    <td><input name="transport_distance_list_arr[{$key}][name]" type="text"  value="{$vo.name|default=''}" placeholder="请输入名称" class="layui-input "></td>
                                    <td><input name="transport_distance_list_arr[{$key}][distance]" type="number"  value="{$vo.distance|default=''}" placeholder="请输入距离" class="layui-input "> </td>
                                    <td>
                                        <button class="layui-btn layui-btn-danger layui-btn-sm del-btn">删除</button>
                                    </td>
                                </tr>
                                {/volist}
                                <tr class="addRowBtnTr">
                                    <td colspan="4" style="text-align:center;">
                                        <div class="addRowBtn color-blue pointer ">添加一行</div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label"><b>货运距离</b><br></label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <textarea required name="transport_distance_list"  placeholder="请输入货运距离选项"  class="layui-textarea">{:sysconf('transport_distance_list')}</textarea>-->
<!--                            <p class="help-block">用中文“；”分开多个选项</p>-->
<!--                        </div>-->
<!--                    </div>-->


                </div>

                <div class="hr-line-dashed"></div>

                <div class="layui-form-item text-center">
                    <button class="layui-btn" type="submit">保存配置</button>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name='script'}
<script>
    require(['ckeditor'], function () {

    })

    $(function () {
        //=============================== 货物种类 ==================================
        // 点击添加一行
        $('#transportTypeTable .addRowBtn').on('click', function () {
            var index = $('#transportTypeTable .data-row').length;
            var newRow = `
          <tr class="data-row">
            <td><input name="transport_scene_list_arr[${index}][sort]" type="number" value="0" placeholder="请输入排序" class="layui-input sort-input"></td>
            <td><input name="transport_scene_list_arr[${index}][name]" type="text"  placeholder="请输入名称" class="layui-input name-input"></td>
            <td><input name="transport_scene_list_arr[${index}][img]" type="hidden" data-max-width="500" data-max-height="500"  value=""> </td>
            <td>
              <button class="layui-btn layui-btn-danger layui-btn-sm del-btn">删除</button>
            </td>
          </tr>
        `;
            $('#transportTypeTable .addRowBtnTr').before(newRow);
            $('[name="transport_scene_list_arr['+index+'][img]"]').uploadOneImage();
        });

        // 点击删除行
        $('#transportTypeTable .tableBody').on('click', '.del-btn', function () {
            $(this).closest('tr').remove();
            updateTypeNames(); // 删除后更新所有 input 的 name 属性索引
        });

        // 更新所有行的 name 属性索引
        function updateTypeNames() {
            $('#transportDistanceTable  .data-row').each(function (i) {
                $(this).find('td:eq(0) input').attr('name', 'transport_scene_list_arr[' + i + '][sort]');
                $(this).find('td:eq(1) input').attr('name', 'transport_scene_list_arr[' + i + '][name]');
                $(this).find('td:eq(2) input').attr('name', 'transport_scene_list_arr[' + i + '][img]');
                $('[name="transport_scene_list_arr[' + i + '][img]"]').uploadOneImage();
            });
        }


        //=============================== 运输距离 ==================================
        // 点击添加一行
        $('#transportDistanceTable .addRowBtn').on('click', function () {
            var index = $('#transportDistanceTable .data-row').length;
            var newRow = `
          <tr class="data-row">
            <td><input name="transport_distance_list_arr[${index}][sort]" type="number" value="0" placeholder="请输入排序" class="layui-input "></td>
            <td><input name="transport_distance_list_arr[${index}][name]" type="text"  placeholder="请输入名称" class="layui-input "></td>
            <td><input name="transport_distance_list_arr[${index}][distance]" type="number" class="layui-input "> </td>
            <td>
              <button class="layui-btn layui-btn-danger layui-btn-sm del-btn">删除</button>
            </td>
          </tr>
        `;
            $('#transportDistanceTable .addRowBtnTr').before(newRow);
        });

        // 点击删除行
        $('#transportDistanceTable .tableBody').on('click', '.del-btn', function () {
            $(this).closest('tr').remove();
            updateDistanceNames(); // 删除后更新所有 input 的 name 属性索引
        });

        // 更新所有行的 name 属性索引
        function updateDistanceNames() {
            $('#transportDistanceTable  .data-row').each(function (i) {
                $(this).find('td:eq(0) input').attr('name', 'transport_distance_list_arr[' + i + '][sort]');
                $(this).find('td:eq(1) input').attr('name', 'transport_distance_list_arr[' + i + '][name]');
                $(this).find('td:eq(2) input').attr('name', 'transport_distance_list_arr[' + i + '][distance]');
            });
        }
    });
</script>
{/block}
